<template>
	<view class="content">
		<view class="top flexc">
			<view class="score">386</view>
			<view class="avaliable">账户余额(元)</view>
			<segment class="segment" color="white" :segs="segs" v-model="segIndex"></segment>
		</view>
		<view>
			<view class="section flexr align-center">
				<view class="header"></view>
				<view class="title">请选择储值金额</view>
			</view>
			<grid-view type="masonry"
				class="recharges"
				:cross-axis-count="2"
				:cross-axis-gap="12"
				:main-axis-gap="12"
			>
				<view class="recharge active">
					<image class="recharge-icon" src="@/static/recharge.png"></image>
					<view class="recharge-money">
						100元
					</view>
					<view class="give-money">
						赠送5元
					</view>
				</view>
				<view class="recharge">
					<image class="recharge-icon" src="@/static/recharge.png"></image>
					<view class="recharge-money">
						200元
					</view>
					<view class="give-money">
						赠送10元
					</view>
				</view>
				<view class="recharge">
					<image class="recharge-icon" src="@/static/recharge.png"></image>
					<view class="recharge-money">
						300元
					</view>
					<view class="give-money">
						赠送20元
					</view>
				</view>
				<view class="recharge">
					<image class="recharge-icon" src="@/static/recharge.png"></image>
					<view class="recharge-money">
						400元
					</view>
					<view class="give-money">
						赠送25元
					</view>
				</view>
			</grid-view>
			<view class="section flexr align-center">
				<view class="header"></view>
				<view class="title">使用说明</view>
			</view>
			<view class="desc">
				1. 所有的会员充值包含网站管理员在后台充值、会员在会员中心使用在线支付直接充值的记录。<br>
				2. 说明会员直接在线支付充值的金额是没有订单显示的。网站管理员可以在会员充值记录里看到充值信息。会员是通过查询余额来查找。<br>
				3. 支持管理员手工为会员充值和查看会员在线充值记录包含会员充值、充值记录。<br>
				4. 以上说明全是占位符，请忽略。<br>
			</view>
		</view>
		
		<view class="recharge-now">
			<view class="primary-button">
				立即充值
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from "vue";
import segment from "@/widgets/segment.vue"
const segs = ref(['储值金额','储值记录','消费历史记录'])
const segIndex = ref(0)
watch(segIndex, (newVal) => {
	if (newVal == 1) {
		uni.navigateTo({
			url:"/pages/my/recharge_history"
		})
	} else if (newVal == 2) {
	}
})
</script>

<style lang="scss">
.content {
	// background-color: white;
	overflow-y: scroll;
	position: relative;
	padding-bottom: 0;
	// flex: 1;
	.top {
		height: 384rpx;
		background-color: #156557;
		padding: 32rpx;
		.score {
			font-size: 88rpx;
			color: white;
			margin-top: 4rpx;
			align-self: center;
		}
		.avaliable {
			color: white;
			align-self: center;
			margin-top: 5rpx;
		}
		.segment {
			margin-top: 67rpx;
		}
	}
	.section {
		margin: 32rpx;
	}
	.header {
		width: 8rpx;
		border-radius: 4rpx;
		height: 32rpx;
		min-height: 32rpx;
		background-color: $primary-color;
	}
	.title {
		font-size: 32rpx;
		color: $text-color1;
		margin-left: 16rpx;
	}
	.recharges {
		padding: 0 32rpx;
	}
	.recharge {
		height: 200rpx;
		border-radius: 15rpx;
		border: 1px solid white;
		background-color: white;
		box-sizing: border-box;
		position: relative;
		&.active {
			background-color: #EFF9F8;
			border-color: $primary-color;
		}
		.recharge-money {
			font-size: 48rpx;
			color: $primary-color;
			top: 38rpx;
			left: 40rpx;
			position: absolute;
		}
		.give-money {
			color: $text-color2;
			top: 100rpx;
			left: 40rpx;
			position: absolute;
		}
		.recharge-icon {
			position: absolute;
			right: 14rpx;
			bottom: 14rpx;
			width: 88rpx;
			height: 88rpx;
		}
	}
	.desc {
		color: $text-color2;
		font-size: 24rpx;
		padding: 0 32rpx;
		line-height: 38rpx;
		padding-bottom: 20rpx;
	}
	.recharge-now {
		background-color: white;
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid $divider-color2;
		padding-bottom: env(safe-area-inset-bottom);
		.primary-button {
			margin: 32rpx 48rpx;
		}
	}
}
</style>
